<template>
  <div class="home_container">
    <div class="home_header">
      <el-container>
        <el-header style="text-align: right; font-size: 100%;height: 60px;background-color:#66B3FF">
        </el-header>
      </el-container>
    </div>

    <div class="home_main">
      <el-container>
        <el-aside style="text-align: left;height: 92vh;width: 200px;background-color: #F2F6FC">
          <el-button icon="el-icon-plus" style="margin-left: 10%;margin-top: 15%;width: 150px" @click="addQuestionClick">
            新建问卷
          </el-button>
          <el-menu router style="margin-top: 50px">
            <el-menu-item :index="{path:'/questionnaireList'}" ><i class="el-icon-s-order">全部问卷</i></el-menu-item>
            <el-menu-item :index="{path:'/recycleBin'}"><i class="el-icon-delete-solid">回收站</i></el-menu-item>
            <el-menu-item :index="{path:'/groupList'}"><i class="el-icon-user-solid">群组列表</i></el-menu-item>
            <el-menu-item :index="{path:'/dataScreen'}"><i class="el-icon-s-platform">数据大屏</i></el-menu-item>
          </el-menu>
        </el-aside>

        <el-main style="text-align: left;height: 92vh;">
          <el-row type="flex">
            <el-col :span="6" style="font-size: 200%;">
              群组列表
            </el-col>
            <el-col :span="6" :push="9" style="margin-top: 5px">
              <el-button @click="addGroup">创建群组</el-button>
            </el-col>
            <el-col :span="6" :push="5" style="margin-top: 5px">
              <el-input placeholder="请输入群组名进行搜索" v-model="searchByName" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click = "searchByNameClick"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <el-row v-for="(group) in allGroup.slice((currentPage-1)*pageSize,currentPage*pageSize)" tracked-by="$index">
            <el-form :model="group" status-icon ref="group">
              <el-card style="width: 1240px;margin-top: 20px">
                <div>
                  <span style="font-size: 150%">{{group.name}}</span>
                  <span style="float: right; padding: 3px 0">成员人数：{{group.number}}</span>
                </div>
                <div style="margin-top: 40px">
                  <el-button-group style="float: right; padding: 3px 0" type="text">
                    <el-button icon="el-icon-user" @click="getMemberList(group)">
                      成员列表
                    </el-button>
                    <el-button icon="el-icon-circle-plus-outline" @click="getAllUser(group)">
                      添加成员
                    </el-button>
                  </el-button-group>
                </div>
              </el-card>
            </el-form>
          </el-row>
          <div class="block" style="margin-left: 380px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-size="4"
                :page-sizes="[4]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="allGroup.length">
            </el-pagination>
          </div>
        </el-main>

        <div class="add_group">
          <el-form>
            <el-dialog title="添加群组" :visible.sync="addGroupVisible">
              <el-form-item label="群组名"><el-input placeholder="请输入群组名" v-model="newName"></el-input></el-form-item>
              <el-button @click="addGroupClick(newName)">确定</el-button>
            </el-dialog>
          </el-form>
        </div>

        <div class="member_list">
          <el-dialog title="成员列表" :visible.sync="memberListVisible">
            <el-row v-for="(member,index) in allMember" tracked-by="$index" style="margin-top: 10px">
              <span>用户{{(index+1)}}:{{member.username}}</span>
            </el-row>
          </el-dialog>
        </div>

        <div class="add_member">
          <el-dialog title="添加成员" :visible.sync="addUserVisible">
            <el-row v-for="(user,index) in allUser" tracked-by="$index" style="margin-top: 10px">
              <el-divider></el-divider>
              <span>用户{{(index+1)}}:{{user.username}}<el-button @click="addMember(user)" style="margin-left: 25px">添加</el-button></span>
            </el-row>
          </el-dialog>
        </div>
      </el-container>

    </div>


  </div>
</template>

<script>
export default {
  data(){
    return{
      allMember:[],
      member_list:[],
      allUser:[],
      user_list:[],
      member:{
        id:'',
        username:'',
      },
      newName:'',
      allGroup:[],
      group_list: [],
      group:{
        id:'',
        name:'',
        userId:'',
        number:'',
      },
      total:'',
      currentPage: 1,
      pageSize: 4,
      searchByName:'',
      temp:'',
      memberTotal:'',
      userTotal:'',
      currentGroupId:'',
      memberListVisible:false,
      addUserVisible:false,
      addGroupVisible:false,
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //新建问卷
    //点击这个按钮之后跳转到新建页面
    //应当把用户的id传输到新建组件中，然后新建完毕之后返回后端
    addQuestionClick(){
      this.$router.push({
        path:'/chooseTemplate',
        query:{
        }
      })
    },
    addGroup(){
      this.addGroupVisible=true;
    },

    addGroupClick(name){
      this.$http({
        url:'http://47.104.100.60:82/addNewGroup',
        method:'post',
        data:{
          name:name,
          userId:sessionStorage.getItem('userId')
        }
      }).then(res =>{
        if(res.data.success == 1){
          this.$router.go(0)
          alert('添加成功')

        }else{
          alert('添加失败')
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    //前端实现问卷查找
    //此处是重点，该方法在其余组件中也会使用到
    searchByNameClick(){
      let reg = new RegExp(this.searchByName)
      let flag = 0
      for(let i = 0; i < this.total; i++){
        if(reg.test(this.group_list[i].name)){
          //  满足条件就把该问卷调到最前面
          //  逻辑比较简陋
          //  从该位置开始删除掉一个元素，获取删除元素的数组，提取其中的元素放到该原数组的首部
          //  如果这样有没有可能整体显示效果是动态的。。。如果是就进行修改找一个中间暂存
          this.group_list.unshift(this.group_list.splice(i,1)[0])
          this.allGroup.unshift(this.allGroup.splice(i,1)[0])
          flag = 1
        }
      }
      if(!flag){
        alert("无匹配群组")
      }

    },

    addMember(user){
      this.$http({
        url:'http://47.104.100.60:82/insertGroupMember',
        method:'post',
        data:{
          userId:sessionStorage.getItem('userId'),
          groupId:this.currentGroupId,
          memberId:user.id,
        }
      }).then(res =>{
        if(res.data.success == 1){
          this.$router.go(0)
          alert('添加成功')

        }else{
          alert('添加失败')
        }
      }).catch(err=>{
        console.log(err)
      })
    },

    getAllUser(group){
      this.addUserVisible=true;
      this.currentGroupId=group.id;
      this.$http({
        url:'http://47.104.100.60:82/getAllUser',
        method:'post',
        data:{
        }
      }).then(res =>{
        this.user_list = res.data
        this.userTotal = this.user_list.length
        this.allUser = []
        //  为memberall赋值
        for(let i = 0; i<this.userTotal; i++){
          this.allUser.push({
            id:this.user_list[i].id,
            username:this.user_list[i].username
          })
        }
      }).catch(err =>{
        console.log(err)
      })
    },

    getMemberList(group){
      this.memberListVisible=true;
      this.$http({
        url:'http://47.104.100.60:82/getGroupMemberByGroupId',
        method:'post',
        data:{
          groupId:group.id
        }
      }).then(res =>{

        //  将后端获取到的数据存储起来
        this.member_list = res.data.filter((item)=>{
          return item
        })

        this.memberTotal = this.member_list.length
        this.allMember =[]
        //  为memberall赋值
        for(let i = 0; i<this.memberTotal; i++){
          this.allMember.push({
            id:this.member_list[i].id,
            username:this.member_list[i].username
          })
        }
      }).catch(err =>{
        console.log(err)
      })
    },

  },

  //获取问卷数据
  mounted() {
    this.$http({
      url:'http://47.104.100.60:82/getGroupByUserId',
      method:'post',
      data:{
        // userId:this.$route.query.userId
        userId:sessionStorage.getItem('userId')
      }

    }).then(res =>{

      //  将后端获取到的数据存储起来
      this.group_list = res.data.filter((item)=>{
        return item
      })

      this.total = this.group_list.length
      //  为groupall赋值
      for(let i = 0; i<this.total; i++){
        this.allGroup.push({
          userId:this.group_list[i].userId,
          name:this.group_list[i].name,
          number:this.group_list[i].number,
          id:this.group_list[i].id
        })
      }
    }).catch(err =>{
      console.log(err)
    })
  },

}
</script>

<style scoped>

</style>